<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background: #ccc
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
终点x<input type="number" id="sx" min="0" max="500" value="0"><br>
终点y<input type="number" id="sy" min="0" max="400" value="0"><br>
控制点x<input type="number" id="cx" min="0" max="500" value="0"><br>
控制点y<input type="number" id="cy" min="0" max="400" value="0"><br>
<canvas width="500" height="400" id="canvas">
    您的浏览器不支持canvas，请更新！
</canvas>
</body>
<script>
    var x1=0,
        x2=0,
        y1=0,
        y2=0;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    $(document).mousedown(function () {
        x1=$("#sx").val();
        x2=$("#sy").val();
        y1=$("#cx").val();
        y2=$("#cy").val();
        draw(x1,y1,x2,y2);
    })
   function draw(x1,y1,x2,y2) {
        ctx.clearRect(0,0,500,400)
         ctx.beginPath();
        ctx.moveTo(250,250)
         ctx.quadraticCurveTo(x1,y1,x2,y2);
         ctx.stroke()
   }




</script>
</html>